import { InfoCircleOutlined } from "@ant-design/icons";
import { Alert, Col, Row } from "antd";
import { Form, Input, InputNumber, Radio, Select } from "knowdesign";
import { useForm } from "knowdesign/lib/basic/form/Form";
import TextArea from "knowdesign/lib/basic/input/TextArea";
import "./index.less";

const App = ({}) => {
  const [form] = useForm();
  return (
    <>
      <div style={{ marginTop: 46, marginBottom: 46 }}>
        <Row justify="space-around">
          <Col span={16}>
            <div style={{ height: "auto" }}>
              <div style={{ width: "100%", textAlign: "center" }}>
                <Alert message=" 您可以配置作业的传输速率和错误纪录数来控制整个数据同步过程" type="info" showIcon />
              </div>
              <div className="dc-wfw-form-custom">
                <Form form={form} layout="vertical" name="test">
                  <Form.Item
                    name="dataSource"
                    label="任务期望最大并发数"
                    rules={[{ required: true }]}
                    tooltip={{
                      title: "Tooltip with customize icon",
                      icon: <InfoCircleOutlined />,
                    }}
                  >
                    <Select style={{ width: "100%" }} size="small" />
                  </Form.Item>

                  <Form.Item
                    name="table"
                    label="同步速率"
                    rules={[{ required: true }]}
                    tooltip={{
                      title: "Tooltip with customize icon",
                      icon: <InfoCircleOutlined />,
                    }}
                  >
                    <Radio.Group>
                      <Radio value="top">限流</Radio>
                      <Radio value="right">不限流</Radio>
                    </Radio.Group>
                    <InputNumber size="small" /> M/s
                  </Form.Item>

                  <Form.Item
                    name="error"
                    label="错误记录数"
                    rules={[{ required: true }]}
                    tooltip={{
                      title: "Tooltip with customize icon",
                      icon: <InfoCircleOutlined />,
                    }}
                  >
                    <span style={{ fontSize: 13 }}>超过&nbsp;&nbsp;</span>
                    <Input
                      placeholder="脏数据条数范围，默认允许脏数据"
                      size="small"
                      style={{ width: "300px" }}
                    />{" "}
                    <span style={{ fontSize: 13 }}>
                      &nbsp;&nbsp;条，任务自动结束
                    </span>
                  </Form.Item>
                </Form>
              </div>
            </div>
          </Col>
        </Row>
      </div>
    </>
  );
};

export default App;
